<template>
	<div class="page-ctx">
		<div class="section">
			<div class="sec-title">基本信息</div>
			<div class="sec-ctx">
				<div class="base-box">
					<div class="base-left">
						<div class="avatar-box">
							<el-image style="width: 70px; height: 70px" :src="info.image"
								:preview-src-list="[info.image]">
							</el-image>
						</div>
					</div>
					<div class="base-right">
						<div class="info-list">
							<div class="info-item">
								<div class="label">用户ID：</div>
								<div class="val">{{ info.id }}</div>
							</div>
							<div class="info-item">
								<div class="label">用户状态：</div>
								<div class="val">正常
									<!-- 加入黑名单 冻结 -->
								</div>
							</div>
							<!-- <div class="info-item">
								<div class="label">用户身份：</div>
								<div class="val">普通用户</div>
							</div> -->
							<!-- <div class="info-item">
								<div class="label">会员等级：</div>
								<div class="val">{{ info.levelTitle }} <el-link type="primary"
										@click="open_level()">修改</el-link></div>
							</div> -->
							<div class="info-item">
								<div class="label">分销等级：</div>
								<div class="val" style="display: flex;align-items: center;">
									<div v-if="info.type==0">客户</div>
									<div v-if="info.type==1">二级代理</div>
									<div v-if="info.type==2">一级代理</div>
									<div v-if="info.type==3">业务员</div>
									<el-link type="primary" v-if="info.childNum==0"
										@click="open_agent()">修改</el-link>
									<div v-else="" style="margin-left: 10px;color: #66b1ff;">因为有下级，若修改请联系管理员</div>	
								</div>
							</div>
							<div class="info-item">
								<div class="label">成为用户时间：</div>
								<div class="val">{{ info.createdTime }}</div>
							</div>
							<!-- <div class="info-item">
								<div class="label">用户渠道：</div>
								<div class="val">{{'网站注册'}}</div>
							</div> -->

							<div class="info-item">
								<div class="label">最近更新：</div>
								<div class="val">{{ info.updatedTime }}</div>
							</div>

							<!-- <div class="info-item">
								<div class="label">登录设备：</div>
								<div class="val">-</div>
							</div> -->
							<div class="info-item">
								<div class="label">最后一次登录时间：</div>
								<div class="val">{{ info.lastLogin }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="section">
			<div class="sec-title">个人资料</div>
			<div class="sec-ctx">
				<div class="xinxi-box">
					<div class="info-list">
						<div class="info-item">
							<div class="label">昵称：</div>
							<div class="val">{{ info.nickname }}
							<el-link type="primary" 
									@click="dialogVisible = true">修改</el-link>
								
							</div>

						</div>
						<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
							<div flex>
								<div class="label">昵称</div>
								<el-input v-model="form.nickname" placeholder="请输入昵称"></el-input>
							</div>
							<span slot="footer" class="dialog-footer">
								<el-button @click="dialogVisible = false">取 消</el-button>
								<el-button type="primary" @click="open_nickname()">确 定</el-button>
							</span>
						</el-dialog>
						
						<div class="info-item">
							<div class="label">密码：</div>
							<div class="val">{{ info.password }}<el-link type="primary"
									@click="dialogPassword = true">修改</el-link></div>
						</div>
						<el-dialog title="提示" :visible.sync="dialogPassword" width="30%">
							<div flex>
								<div class="label">密码</div>
								<el-input v-model="password" placeholder="请输入密码"></el-input>
							</div>
							<span slot="footer" class="dialog-footer">
								<el-button @click="dialogPassword = false">取 消</el-button>
								<el-button type="primary" @click="open_password()">确 定</el-button>
							</span>
						</el-dialog>
						
						<div class="info-item">
							<div class="label">姓名：</div>
							<div class="val">{{ info.realName }}</div>
						</div>
						<div class="info-item">
							<div class="label">性别：</div>
							<div class="val">{{ info.sex === 2 ? '女' : (info.sex === 1 ? '男' : (info.sex === 0 ? '未知' :
								'未知')) }}</div>
						</div>
						<div class="info-item">
							<div class="label">生日：</div>
							<div class="val">{{ info.birthday }}</div>
						</div>
						<div class="info-item">
							<div class="label">手机号：</div>
							<div class="val">{{ info.phone }}</div>
						</div>
						<div class="info-item">
							<div class="label">邮箱：</div>
							<div class="val">{{ info.email }}</div>
						</div>
						<div class="info-item">
							<div class="label">身份证号：</div>
							<div class="val">{{ info.identityId }}</div>
						</div>
						<div class="info-item">
							<div class="label">地址：</div>
							<div class="val">{{ info.address }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div class="section">
			<div class="sec-title">认证信息</div>
			<div class="sec-ctx">
				<div class="xinxi-box">
					<div class="info-list">
						<div class="info-item">
							<div class="label">认证状态：</div>
							<div class="val">{{ auth_status_title }} <el-link type="primary"
									@click="open_auth()">审核</el-link></div>
						</div>
						<div class="info-item">
							<div class="label">姓名：</div>
							<div class="val">{{ info.realName }}</div>
						</div>
						<div class="info-item">
							<div class="label">身份证号：</div>
							<div class="val">{{ info.identityId }}</div>
						</div>
						<div class="info-item">
							<div class="label">销售渠道：</div>
							<div class="val">{{ info.company }}</div>
						</div>
						<div class="info-item">
							<div class="label">手机号码：</div>
							<div class="val">{{ info.phone }}</div>
						</div>
						<!-- <div class="info-item">
							<div class="label">营业执照：</div>
							<div class="val">
								<el-image style="width: 120px; height: 120px" :src="info.businessLicense"
									:preview-src-list="[info.businessLicense]">
								</el-image>
							</div>
						</div> -->
					</div>
				</div>
			</div>
		</div>



		<!-- <div class="section">
					  <div class="sec-title">用户标签</div>
					  <div class="sec-ctx">
					    <div class="xinxi-box">
					      <div class="info-list">
					        <div class="info-item">
					          <div class="label">人物画像：</div>
					          <div class="val">
					            <el-tag type="success"> 新用户 </el-tag>
					            <el-tag type="success"> 旅游 </el-tag>
					            <el-tag type="success"> 摄影 </el-tag>
					          </div>
					        </div>
					
					        <div class="info-item">
					          <div class="label">名字：</div>
					          <div class="val">0</div>
					        </div>
					        <div class="info-item">
					          <div class="label">纪元号：</div>
					          <div class="val">0</div>
					        </div>
					        <div class="info-item">
					          <div class="label">简介：</div>
					          <div class="val">0</div>
					        </div>
					        <div class="info-item">
					          <div class="label">地区：</div>
					          <div class="val">0</div>
					        </div>
					        <div class="info-item">
					          <div class="label">职业：</div>
					          <div class="val">0</div>
					        </div>
					        <div class="info-item">
					          <div class="label">学校：</div>
					          <div class="val">0</div>
					        </div>
					        <div class="info-item">
					          <div class="label">座驾：</div>
					          <div class="val">0</div>
					        </div>
					      </div>
					    </div>
					  </div>
					</div> -->


		<div class="section">
			<div class="sec-title">资产信息</div>
			<div class="sec-ctx">
				<div class="xinxi-box">
					<div class="info-list">
						<div class="info-item">
							<div class="label">积分：</div>
							<div class="val">{{ info.jifen }}
								<!-- <el-link type="primary">查看</el-link> -->
							</div>
						</div>
						<div class="info-item">
							<div class="label">余额：</div>
							<div class="val">{{ info.money }}
								<!-- <el-link type="primary">查看</el-link> -->
							</div>
						</div>
						<div class="info-item">
							<div class="label">佣金：</div>
							<div class="val">{{ info.commission }}
								<!-- <el-link type="primary">查看</el-link> -->
							</div>
						</div>
						<!-- <div class="info-item">
					          <div class="label">银行卡：</div>
					          <div class="val">{{info.jifen}}<el-link type="primary">查看</el-link></div>
					        </div> -->
					</div>
				</div>
			</div>
		</div>

		<!-- <div class="section">
					  <div class="sec-title">交易统计</div>
					  <div class="sec-ctx">
					    <div class="xinxi-box">
					      <div class="info-list">
					        <div class="info-item">
					          <div class="label">订单数：</div>
					          <div class="val">
					            0
					            <el-link type="primary">查看</el-link>
					          </div>
					        </div>
					        <div class="info-item">
					          <div class="label">累计消费：</div>
					          <div class="val">
					            0
					            <el-link type="primary">查看</el-link>
					          </div>
					        </div>
					        <div class="info-item">
					          <div class="label">退款数：</div>
					          <div class="val">
					            0
					            <el-link type="primary">查看</el-link>
					          </div>
					        </div>
					        <div class="info-item">
					          <div class="label">累计退款金额：</div>
					          <div class="val">
					            0
					            <el-link type="primary">查看</el-link>
					          </div>
					        </div>
					
					        <div class="info-item">
					          <div class="label">实际消费订单数：</div>
					          <div class="val">
					            0
					            <el-link type="primary">查看</el-link>
					          </div>
					        </div>
					        <div class="info-item">
					          <div class="label">实际消费金额：</div>
					          <div class="val">
					            0
					            <el-link type="primary">查看</el-link>
					          </div>
					        </div>
					      </div>
					    </div>
					  </div>
					</div> -->

		<user_auth_modal ref="user_auth_modal" @confirm="confirmAuth" />
		<user_level_modal ref="user_level_modal" @confirm="confirmAuth" />
		<user_agent_modal ref="user_agent_modal" @confirm="confirmAuth" />
	</div>
</template>

<script>
import user_level_modal from '@/components/user/user_level_modal.vue'
import user_agent_modal from '@/components/user/user_agent_modal.vue'
import user_auth_modal from '@/components/user/user_auth_modal.vue'

import { mapState } from "vuex";
export default {
	name: "news",
	components: {
		user_auth_modal,
		user_level_modal,
		user_agent_modal
	},
	data() {
		return {
			id: this.$route.query.id || '',
			info: {

			},
			form: {
				nickname: ''
			},
			auth_status_title: '',
			auth_status_map: {
				0: '未提交',
				1: '待审核',
				2: '已通过',
				'-1': '被驳回',
			},

			// 修改用户昵称弹窗
			dialogVisible: false,
			//修改密码弹窗
			dialogPassword:false,
			password:''
		};
	},
	computed: {},
	watch: {},
	created() {
		this.setView();
	},
	mounted() { },
	methods: {
		setView() {
			this.$api({
				url: "",
				method: "get",
				data: {
					action: 'users_detail',
					id: this.id
				},
			}).then((res) => {
				// console.warn("新闻详情", res);
				if (res.code == 200) {
					this.info = res.data

					this.auth_status_title = this.auth_status_map[this.info.renzheng]
				}
			});
		},
		// 修改会员等级
		open_level() {
			this.$refs.user_level_modal.init(this.info)
		},
		// 修改代理等级
		open_agent() {
			this.$refs.user_agent_modal.init(this.info)
		},
		// 修改用户昵称
		open_nickname() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "users_save",
					id: this.id,
					...this.form
				}
			}).then(res => {
				if (res.code == 200) {
					this.setView()
					this.dialogVisible = false
					this.$message({
						message: res.msg,
						type: 'success'
					})
				} else {
					alertErr(res.msg)
				}
			})
		},
		// 修改密码
		open_password() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "users_save",
					id: this.id,
					password:this.password
				}
			}).then(res => {
				if (res.code == 200) {
					this.setView()
					this.dialogVisible = false
					this.$message({
						message: res.msg,
						type: 'success'
					})
				} else {
					alertErr(res.msg)
				}
			})
		},
		open_auth() {
			this.$refs.user_auth_modal.init(this.info)
		},
		confirmAuth() {
			this.setView()
		}
	},
};
</script>


<style scoped lang="less">
.page-wrap {
	.page-inner {}
}

.section {
	margin-bottom: 10px;
	background: #fff;
	padding: 20px;
	border-radius: 6px;
}

.sec-title {
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: bold;
}

.sec-ctx {}

[flex] {
	display: flex;
	align-items: center;
	padding: 0 20px;

	.label {
		width: 20%;
	}
}

.info-list {
	flex-wrap: wrap;
	// display: flex;
	flex-wrap: wrap;

	.info-item {
		margin-bottom: 15px;
		display: flex;

		&+.info-item {
			// margin-left: 20px;
		}

		.label {}

		.val {
			.el-tag {
				margin-right: 15px;
			}

			.el-link {
				font-size: 12px;
				margin-left: 20px;
			}
		}
	}
}

.base-box {
	display: flex;

	.base-left {
		.avatar-box {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			overflow: hidden;
		}
	}

	.base-right {
		padding-left: 30px;

		.info-list {
			display: flex;
			width: 900px;

			.info-item {
				width: 300px;
			}
		}
	}
}

.xinxi-box {
	padding-left: 80px;

	.info-list {
		display: flex;
		width: 900px;

		.info-item {
			width: 300px;
		}
	}
}

// 商品信息
.product-box {
	display: flex;
	align-items: flex-start;

	.table-image-item {}

	.product-title-box {
		padding-left: 10px;

		.product-title {
			margin-bottom: 15px;
		}

		.product-guige {}
	}
}
</style>